在教學文章中，有三個建立 Hello World 範例的方案

• Option 1: Using CDN-hosted scripts
• Option 2: Download and host jsPsych
• Option 3: Using NPM

它們的概念比喻如下

• CDN：提供套件網址，直接引入到 HTML 中
• 下載：手動下載套件的程式碼，放進專案中並引入
• NPM：一個指令下載套件，之後引入

以下分別說明、以及最後為什麼在前幾天 jsPsych 的 Hello World 範例使用 CDN 這個選項來操作。

一、CDN

CDN (Content Delivery Network)，中文是內容分發網路。我們能在瀏覽器上看到圖片、影片、聲音，都是因為瀏覽器會幫我們從伺服器上抓檔案到電腦上，接著瀏覽器才會從電腦抓到檔案並顯示出來。

這個運作聽來簡單，但有個問題：當多人同時存取一個檔案(例如一萬人)，這時因為網路頻寬的限制，傳送資料會塞車，導致網頁沒辦法很快地顯示這些資料。這時檔案提供者就會需要 CDN 服務。

CDN 服務已經在全世界各地設定好伺服器，只要圖片。假設有個圖片提供者，他的圖片經常同時被十萬人存取，很多人抱怨說圖片要很久才會看得到。

對於寫網頁的開發者來說，就是在網頁的 HTML 中引入這個 CDN 網址。例如，在引入 jsPsych 時，使用如下的語法引入網址：

<script src="https://unpkg.com/jspsych@7.0.0"></script>

<script></script> 是可以引入 JavaScript 程式碼的標籤，而 src 屬性就是載入填入網址的程式碼。等瀏覽器執行到這行語法後，就會自動載入 jspshch 這個函式庫的程式碼，把一些變數和函式放到瀏覽器的全域環境下（例如 initJsPsych()）。之後就能在網頁中使用這些變數和函式。

二、Download

除了剛剛提到的，從網路上載入 jsPsych 外，我們也可以直接從自己的電腦上載入 jsPsych 這個函式庫。使用上沒什麼差別。先下載下來再引入到 HTML 中有個好處：有時 CDN 網址會會壞掉，先下載下來保管就不怕。

使用的方式不難。就是先看這個函式庫有沒有提供相關檔案，沒有的話就從 CDN 網址撈出來。之後在自己的專案裡面開一個資料夾去安放這些程式碼。之後直接引入這些程式碼檔案的相對路徑就好。

但為了方便起見，這次的系列文中不會用 Download 這個方法。

三、NPM

相對於前面兩種使用 jsPsych 這個函式庫的方式來說，這個使用 NPM 的觀念與方式可能會難懂一些。NPM，全稱是 Node.js Package Manager，Node.js 內建的套件管理器。簡單來說，就是讓 JavaScript 可以用模組化的方式，引入其他第三方套件來節省開發的時間。使用的流程大概會是

1. 在電腦上安裝 Node.js 這個 JavaScript 執行環境
2. 在 終端機 切換到專案資料夾的路徑下
3. 在 終端機 輸入 npm i jspsych 下載函式庫套件
4. 在專案中使用 import {initJsPsych} from 'jspsych' 引入套件

如果聽不懂且沒興趣的，可以跳過這塊。對前端開發在幹嘛有興趣的人，可以繼續看下去：我們來講一點 JavaScript 跟網頁開發的歷史。

網際網路平台（Word Wide We）跟網頁的概念，大概在 1989 ~ 1991 這段時間出現，這時候的網頁，還只有 HTML 而已。當時的 HTML 只有簡單的 <p>、 <h1> 等簡單的標籤而已。

所謂科技始終來自惰性人性。隨著網路越來越多人使用、網頁的需求越來越高，許多開發者與企業希望能在網頁上達成更多的事情。在 1995 年時，有間公司叫 NetScape（網景），它就推出了這個程式語言：JavaScript。

一開始，JavaScript 這個語言的設計很單純，只是為了方便操作網頁用的而已，就像是附屬在瀏覽器國度的一種語言，沒辦法在 Windows 或是 MacOS 上面跑，就只是出來打打雜而已。

隨著人們在網頁上的業務情境越來越多，像是部落格、購物網站，甚至是複雜的軟體應用，開發的時間與成本越來越高，開發者幾乎無法自己從零開始開發一個網站了。開發者持續探索能縮短自己開發時間的方式。

其中引用 CDN 是一種作法。引入別人做好的第三方程式碼，就能縮短開發的時間。但這還不夠。大約在 2008 年，Google 釋出了瀏覽器 Google Chrome，並開源了裡面的 JavaScript 引擎 v8。Google 這一舉動推動了 JavaScript 的運行環境： Node.js 的誕生，大概在 2009 年。

在當時，JavaScript 還沒有模組化的功能，而 Node.js 參考了 common.js 的實作方式，硬是在 Node.js 環境下搞出了一套 JavaScript 模組化方案，並且內建了 NPM 這個工具，催生出 JavaScript 第三方套件生態系的這片藍海。從此之後，前端工程師想做某個功能前，常常都會先到 NPM 上找看看有沒有適合的套件可以用。

同樣地，為了方便起見（讓新手好了解），這次的系列文中會盡量不用到 NPM 這個方法。

延伸閱讀

• 從零開始: 使用NPM套件. 如果一個有在寫網站的人，應該百分之兩百知道 NPM… | by sexyoung | 進擊的 Front End‘s | Medium
• Node.js 是什麼？NPM又是什麼？為什麼前端與後端都需要用它們呢？

小結

今天文章提到了，想引入第三方套件的話，可以透過 CDN、Download，NPM 這三種方式。

明天會在繼續岔開話題，聊聊關於實驗設計的觀念。